layui.config({
    base:'/static/layui_ext/treeTable/',
})
layui.use(['treeTable','layer','code','form'],function () {
    var form = layui.form,
        layer = layui.layer,
        treeTable = layui.treeTable;

    var re = treeTable.render({
       elem:'#tree-table',
        url:"/permission/list",
        icon_key:'name',
        width:'1000px',
        end:function (e) {
            form.render();
        },
        cols:[
            {
                key:'name',
                title:'菜单名称',
                width:'300px',
                template:function (item) {
                    if(item.level == 0){
                        return '<span style="color:red;">'+item.name+'</span>';
                    }else if(item.level == 1){
                        return '<span style="color:green;">'+item.name+'</span>';
                    }else if(item.level == 2){
                        return '<span style="color:#aaa;">'+item.name+'</span>';
                    }
                }
            },
            {
                title:'类型',
                width:'80px',
                template:function (item) {
                    if(item.level == 0){
                        return '<button type="button" class="layui-btn layui-btn-xs">根目录</button>';
                    }else if(item.level == 1){
                        return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">目录</button>';
                    }else if(item.level == 2){
                        return '<button type="button" class="layui-btn layui-btn-warm layui-btn-xs">菜单</button>';
                    }
                }
            },
            {
                key:'id',
                title:'ID',
                width:'80px',
                align:'center'
            },
            {
                key:'pid',
                title:'父ID',
                width:'80px',
                align: 'center'
            },
            {
                key:'url',
                title:'请求路径',
                width:'200px',
                align:'center'
            },
            {
                key:'icon',
                title:'图标',
                width:'80px',
                align:'center',
                template:function (item) {
                    return '<i class="'+item.icon+'"></i>';
                }
            },
            {
                title:'操作',
                align:'center',
                width:'250px',
                template:function (item) {
                    if(item.level == 1){
                        return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-filter="dirAdd">添加</button>&nbsp;&nbsp;<button type="button" class="layui-btn layui-btn-xs" lay-filter="dirEdit">编辑</button>';
                    }else if(item.level == 2){
                        return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-filter="menuEdit">编辑</button>&nbsp;&nbsp;<button type="button" class="layui-btn layui-btn-warm layui-btn-xs" lay-filter="menuDel">删除</button>';
                    }else{
                        return "";
                    }
                }
            }
        ]
    });
    // 监听自定义---目录下菜单的新增与目录的修改事件
    treeTable.on('tree(dirAdd)',function(data){
        $("#menu_pid").attr("value",data.item.id);
        $("#menu_name").attr("value",data.item.name);
        openLayer("addDirMenuDiv","新增菜单","dir_menu_sub");
    });
    /*目录新增菜单提交事件监听*/
    form.on('submit(dir_menu_sub)', function(data){
        addMethod(data,"菜单");
        return false;
    });
    /*目录的编辑操作*/
    treeTable.on('tree(dirEdit)',function(data){
        $("#edit_ID").attr("value",data.item.id);
        $("#edit_name").attr("value",data.item.name);
        $("#edit_icon").attr("value",data.item.icon);
        $("#edit_url").attr("value",data.item.url);
        $("#edit_pid").attr("value",data.item.pid);
        openLayer("editDiv","修改目录","dir_menu_edit_sub");

    });
    form.on('submit(dir_menu_edit_sub)', function(data){
        updateMethod(data,"菜单");
        return false;
    });
    /*菜单的编辑与删除事件*/
    treeTable.on('tree(menuEdit)',function(data){
        $("#edit_ID").attr("value",data.item.id);
        $("#edit_name").attr("value",data.item.name);
        $("#edit_icon").attr("value",data.item.icon);
        $("#edit_url").attr("value",data.item.url);
        $("#edit_pid").attr("value",data.item.pid);
        openLayer("editDiv","修改菜单","dir_menu_edit_sub");
    });
    /*菜单删除事件*/
    treeTable.on('tree(menuDel)',function(data){
        $.ajax({
           url:'/permission/delete/'+data.item.id,
           type:'get',
           success:function (obj) {
               if("权限不足" == obj.msg){
                   layer.msg(obj.msg,{icon:7,time:800});
               }else if("exist" == obj){
                   layer.msg("已分配的菜单不能删除!",{icon:7,time:800});
               }else if("delError" == obj){
                   layer.msg("删除失败!",{icon:7,time:800});
               }else{
                   layer.msg("删除菜单成功!",{icon:6,time:800});
                   /*重载数表*/
                   treeTable.render(re);
               }
           }
        });
    });
    /*新增目录               start*/
    $(".add-dir").click(function () {
        openLayer("addDirDiv","新增目录","dir_sub_btn");
    });
    $("#dirIcon").mouseover(function () {
        layer.tips("图标代码可参考UI元素中图标页面",'#dirIcon',{time:1000});
    });
    $("#menuIcon").mouseover(function () {
        layer.tips("图标代码可参考UI元素中图标页面",'#menuIcon',{time:1000});
    });
    form.on('submit(dir_sub)', function(data){
        addMethod(data,"目录");
        return false;
    });
    /*新增目录               end*/

    /*打开弹层1公共方法
    *用于目录新增、目录下菜单新增
    * div:要打开的div
    * msg:title的内容
    * btnId:提交按钮ID
    * */
    function openLayer(div,msg,btnId){
        var openDiv = "#"+div;
        var sub_btn = "#"+btnId;
        $(openDiv).css("display","block");
        layer.open({
            type:1,
            title:msg,
            content:$(openDiv),
            shade:0.4,
            scrollbar:true,
            area:['500px','400px'],
            btn:['提交','关闭'],
            yes:function(index,layero){
                layero.find('form').find(sub_btn).click();
                layer.close(index);
            } ,
            end:function () {
                $(openDiv).css("display","none");
            }
        });
    }
    /*
    * 目录新增、目录下菜单新增公共方法
    * data:数据
    * info:回调函数的提示信息
    * */
    function addMethod(data,info){
        $.ajax({
            url:'/permission/insert',
            type:'post',
            data:data.field,
            success:function (obj) {
                if(1 == obj){
                    layer.msg("新增"+info+"成功",{icon:6,time:800});
                    /*重载数表*/
                    treeTable.render(re);
                }else{
                    layer.msg("新增"+info+"失败",{icon:7,time:800});
                }
            },
            dataType:"json"
        });
    }
    /*更新目录，更新菜单公共方法
    * data:数据
    * info:回调函数的提示信息
    * */
    function updateMethod(data,info){
        $.ajax({
            url:'/permission/update',
            type:'post',
            data:data.field,
            success:function (obj) {
                if(1 == obj){
                    layer.msg("更新"+info+"成功",{icon:6});
                    /*重载数表*/
                    treeTable.render(re);
                }else{
                    layer.msg("更新"+info+"失败",{icon:7});
                }
            },
            dataType:"json"
        });
    }

    // 全部展开
    $('.open-all').click(function(){
        treeTable.openAll(re);
    });
    // 全部关闭
    $('.close-all').click(function(){
        treeTable.closeAll(re);
    });
    // 随机更换小图标
    $('.change-icon').click(function(){
        var arr = [
            {
                open: 'layui-icon layui-icon-set',
                close: 'layui-icon layui-icon-set-fill',
                left: 16,
            },
            {
                open: 'layui-icon layui-icon-rate',
                close: 'layui-icon layui-icon-rate-solid',
                left: 16,
            },
            {
                open: 'layui-icon layui-icon-tread',
                close: 'layui-icon layui-icon-praise',
                left: 16,
            },
            {
                open: 'layui-icon layui-icon-camera',
                close: 'layui-icon layui-icon-camera-fill',
                left: 16,
            }
        ];
        var round = Math.round(Math.random()*(arr.length - 1));
        re.icon = arr[round];
        treeTable.render(re);
    })
});